<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>List 列表</title>
</head>
<body>
    <p>无序列表基本简介</p>
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>
    <p>有序列表基本简介</p>
    <ol>
        <li>Coffee</li>
        <li>Milk</li>
    </ol>
    <dl>
        <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dd>milk coffee</dd>
        <dt>Milk</dt>
    </dl>

    <h4>我们对比不同的ul 的type disc circle square</h4>
    <h4>Disc 项目符号列表：</h4>
    <ul type="disc">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ul>

    <h4>Circle 项目符号列表：</h4>
    <ul type="circle">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ul>

    <h4>Square 项目符号列表：</h4>
    <ul type="square">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ul>

    <!-- 可以发现默认是 使用数字 1 等使用的-->
    <h4>数字列表：</h4>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <h4>字母列表：</h4>
    <ol type="A">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
        <li>桔子五</li>
        <li>桔子六</li>
        <li>桔子七</li>
        <li>桔子八</li>
        <li>桔子九</li>
        <li>桔子十</li>
    </ol>

    <h4>小写字母列表：</h4>
    <ol type="a">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <h4>罗马字母列表：</h4>
    <ol type="I">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <h4>小写罗马字母列表：</h4>
    <ol type="i">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
        <li>桔子五</li>
        <li>桔子六</li>
    </ol>

    <!-- 嵌套的列表如果没有 指定类型 默认会使用不同的type
        从理论上是可以无限嵌套的
    -->
    <h4>一个嵌套的列表:</h4>
    <ul>
        <li>咖啡</li>
        <li>茶:
            <ul>
                <li>红茶</li>
                <li>绿茶
                    <ul>
                        <li>中国绿茶</li>
                        <li>美国绿茶</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>牛奶</li>
    </ul>

    <h2>一个自定义的列表:</h2>
    <h2>一个定义列表：</h2>
    <dl>
        <dt>计算机</dt>
        <dd>用来计算的仪器 ... ...</dd>
        <dt>显示器</dt>
        <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>

    <!--  自定义的列表 嵌套进来没啥效果 -->
    <dl>
        <dt>计算机</dt>
        <dd>用来计算的仪器 ... ...
          <dt>计算的仪器</dt>
          <dd>加减 乘除的</dd>
        </dd>
        <dt>显示器</dt>
        <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>

</body>
</html>